﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="lib/signalr.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.js"
            integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
            integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
            crossorigin="anonymous"></script>
    <title>MoveShape</title>
    <style>
        #shape {
            width: 100px;
            height: 100px;
            background-color: red;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="shape"></div>
    <script>
        $shape = $("#shape");
        var connection = new signalR.HubConnectionBuilder()
                                    .withUrl('/shapeHub')
                                    .build();

        connection.on('shapeMoved', function(x, y) {
            $shape.css({ left: x, top: y });
        });

        connection.start().then(
            $shape.draggable({
                drag: function () {
                    connection.invoke("MoveShape", this.offsetLeft, this.offsetTop || 0);
                }
            })
        );
    </script>
</body>
</html>